<template>
	<div>
		<el-table
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
			border
			size="mini"
			class="small-size-table"
			:data="dataList"
			style="width: 100%;"
			highlight-current-row
			header-align="center"
			ref="tableList"
			@sort-change="sortChange"
			:header-cell-style="getRowClass"
			:max-height="tableHeight"
		>
			<el-table-column
				type="index"
				label="序号"
				width="80"
				align="center"
			/>
			<el-table-column
				align="center"
				label="手牌ID"
				min-width="200"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<div
						v-if="scope.row.handCode"
						class="text-link"
						@click="
							$router.push({
								path: '/dxn/gameManager/gameList/gameBase',
								query: {
									handId: scope.row.handCode
								}
							})
						"
					>
						{{ scope.row.handCode }}
					</div>
					<div v-else>-</div>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="牌桌ID"
				min-width="180"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<div
						v-if="scope.row.tableCode"
						class="text-link"
						@click="
							$router.push({
								path:
									'/dxn/gameManager/cardTablesList/cardTablesBase',
								query: {
									tableId: scope.row.tableCode
								}
							})
						"
					>
						{{ scope.row.tableCode }}
					</div>
					<div v-else>-</div>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="牌桌名称"
				min-width="150"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.tableName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="游戏名称"
				min-width="100"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.gameName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="俱乐部ID"
				min-width="100"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<div
						v-if="scope.row.clubId"
						class="text-link"
						@click="
							$router.push({
								path: '/dxn/clubManager/clubList',
								query: {
									clubId: scope.row.clubId
								}
							})
						"
					>
						{{ scope.row.clubId }}
					</div>
					<div v-else>-</div>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="手牌开始时间"
				min-width="100"
			>
				<template slot-scope="scope">
					{{ scope.row.handStartTime || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="手牌结束时间"
				min-width="100"
			>
				<template slot-scope="scope">
					{{ scope.row.handEndTime || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="有效底池"
				min-width="100"
				sortable="custom"
				prop="validPot"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ handleNumber(scope.row.currency, scope.row.validPot) }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="起手牌信息"
				min-width="150"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<template
						v-if="
							scope.row.handCards && scope.row.deskmateHandCards
						"
					>
						<span
							v-for="(item, index) in getHandCardsImage(
								scope.row.handCards
							)"
							:key="index + 10"
						>
							<el-image
								class="hand-card-img"
								:src="item"
								fit="contain"
							></el-image>
						</span>
						<span style="margin-left: 3px;"></span>
						<span
							v-for="(item, index) in getHandCardsImage(
								scope.row.deskmateHandCards
							)"
							:key="index + 20"
						>
							<el-image
								class="hand-card-img"
								:src="item"
								fit="contain"
							></el-image>
						</span>
					</template>
					<template v-else>
						-
					</template>
				</template>
			</el-table-column>

			<el-table-column
				align="center"
				label="结算信息"
				min-width="150"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.settlementInfo || '-' }}
				</template>
			</el-table-column>

			<el-table-column
				align="center"
				label="操作"
				min-width="100"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<div class="text-link" @click="handleGameReplay(scope.row)">
						牌局回顾
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			v-if="total"
			class="pageValue"
			background
			layout="total, sizes,prev, pager, next, jumper"
			:current-page.sync="pageNum"
			:page-size="pageSize"
			:page-sizes="pageSizes"
			:total="total"
			:pager-count="9"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		/>
		<GameReplay
			:dialogVisible.sync="gameReplay.visible"
			:dialogLoading="gameReplay.loading"
			:replayDetail="gameReplay.replayDetail"
			:replayList="gameReplay.replayList"
			:replayReqResult="gameReplay.replayReqResult"
		/>
	</div>
</template>

<script>
import list from '@/mixins/list'
import GameReplay from '@/components/GameReplay'
import { getCardsImgArr, getGameReplayDetail } from '@/utils/replay'

export default {
	components: {
		GameReplay
	},
	mixins: [list],
	props: {
		type: {
			type: Number,
			default: 0
		},
		params: {
			type: Object,
			default: () => {
				return {}
			}
		},
		tableHeight: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			loading: false,
			dataList: [],
			orderField: undefined,
			orderType: undefined,
			handStatus: 0,
			replayQuery: {
				roundNo: 0, // 手牌num
				tableId: 0 // 牌桌Id
			},
			gameReplay: {
				visible: false, // 回放弹窗可见
				loading: false, // 回放加载
				replayDetail: {}, // 回放详情
				replayList: [], // 回放列表
				replayReqResult: '' // 回放接口数据请求结果
			}
		}
	},
	watch: {
		params: {
			handler(val) {
				this.$refs.tableList?.clearSort()
				this.orderField = undefined
				this.orderType = undefined
				if (val?.userName && val?.deskmateUserName) {
					this.getDataList()
				} else {
					this.dataList = []
				}
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		// 跳转到牌局回放
		handleGameReplay(row) {
			this.replayQuery = {
				tableId: row.tableId,
				roundNo: row.roundNo
			}
			this.gameReplay = {
				visible: true,
				loading: true,
				replayDetail: {
					info: {
						handId: ''
					},
					handStatus: undefined
				},
				replayList: [],
				replayReqResult: ''
			}
			this.handStatus = row.handStatus
			if (row.handStatus === 0) {
				this.gameReplay.replayDetail.info.handId = row.handCode
				this.gameReplay.replayReqResult = '没有记录'
				this.gameReplay.loading = false
				return false
			}
			getGameReplayDetail(this)
				.then((ret) => {
					this.gameReplay.replayDetail = ret.replayDetail
					this.gameReplay.replayList = ret.replayList
				})
				.catch((ret) => {
					this.gameReplay.replayReqResult = ret.message
				})
				.finally(() => {
					this.gameReplay.replayDetail.info.handId = row.handCode
					this.gameReplay.replayDetail.handStatus = row.handStatus
					this.gameReplay.loading = false
				})
		},
		getHandCardsImage(cardsStr) {
			let imageArr = []
			const cardsNumReplaceStr = cardsStr.replace(/[\[\]]/g, '')
			if (cardsNumReplaceStr) {
				imageArr = getCardsImgArr(cardsNumReplaceStr.split(','))
			}
			return imageArr
		},
		sortChange({ column, prop, order }) {
			if (this.params?.userName && this.params?.deskmateUserName) {
				if (prop === 'validPot') {
					this.orderField = 'validPot'
					this.orderType = order === 'descending' ? 'desc' : 'asc'
					this.pageNum = 1
					this.getDataList()
				}
			}
		},
		getDataList() {
			this.loading = true
			this.dataList = []
			const params = this.getParams(this.params)
			params.orderType = this.orderType
			params.orderField = this.orderField
			// type:1单挑手牌信息, 2:同桌手牌信息
			const api =
				this.type === 1
					? 'getPartnerQueryOneChoiceBend'
					: 'getPartnerQuerySameTableBend'
			this.$api[api](params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						this.dataList = res?.data?.record || []
						this.total = res?.data?.totalRecord || 0
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.getDataList()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.getDataList()
		}
	}
}
</script>
<style lang="scss" scoped>
.hand-card-img {
	width: 27px;
	height: 36px;
}
</style>
